<template style="overflow-y: scroll; overflow-x: hidden; height: 100%">
  <el-drawer
    :title="label"
    size="37%"
    :visible.sync="dialog"
    custom-class="demo-drawer"
    @close="handleClose"
  >
    <div class="demo-drawer__content">
      <el-form
        :rules="tableRules"
        :model="tableForm"
        label-width="60px"
        label-position="right"
        class="demo-dynamic"
        ref="form"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="共" prop="col">
              <el-input type="number" v-model="tableForm.col" min="1" max="99" style="width: 80px;"></el-input> <span>列</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="共" prop="row">
              <el-input type="number" v-model="tableForm.row" min="1" max="99" style="width: 80px;"></el-input> <span>行</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="排序" prop="sequence">
              <el-input type="number" v-model="tableForm.sequence" min="1" max="99" style="width: 80px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="边框" prop="border">
              <el-radio-group v-model="tableForm.border">
                <el-radio :label="0">无</el-radio>
                <el-radio :label="1">有</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button v-if="tableForm.dataTableId" type="primary" @click="handleUpdate"> 修 改 </el-button>
        <el-button v-else type="primary" @click="handleCommit"> 确 定 </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>

import { saveDataTable, updateDataTable } from '@/api/rs/manufactureRecordTemplate'

export default {
  props: [
    'dialogVisible'
  ],
  data() {
    return {
      label: '',
      dialog: false,
      loading: false,
      tableForm: {
        dataTemplateId: 0,
        col: 1,
        row: 1,
        border: 0,
        sequence: 0
      },
      tableRules: {
        col: [{required: true, message: "内容不可为空", trigger: "change"}],
        row: [{required: true, message: "内容不可为空", trigger: "change"}],
        sequence: [{required: true, message: "内容不可为空", trigger: "change"}],
        border: [{required: true, message: "内容不可为空", trigger: "change"}],
      },
      dataTables: []
    }
  },
  watch: {
    dialogVisible(val) {
      console.log(val, 'val')
      this.dialog = val.dialogVisible
      this.label = val.label
      this.tableForm = {
        dataTemplateId: 0,
        col: 1,
        row: 1,
        border: 0,
        sequence: 0
      }
      this.tableForm.dataTemplateId = val.dataTemplateId
      this.tableForm.sequence = val.sequence
      if (val.updateTableData) {
        this.tableForm = val.updateTableData
        this.tableForm.border = val.updateTableData.border?1:0
      }
    }
  },
  mounted() {
    this.dialogVisible
  },
  methods: {
    handleCancel() {
      this.dialog = false
    },
    handleClose() {
      this.$refs.form.resetFields()
      this.dialog = false
    },
    handleCommit() {
      this.$refs.form.validate(vali => {
        if (vali) {
          saveDataTable(this.tableForm).then(res => {
            this.dataTables = res.data.dataTables
            this.$message.success("添加成功")
            this.dialog = false
            this.$emit('setTableDatas',this.dataTables)
          })
        }
      })
    },
    handleUpdate() {
      this.$refs.form.validate(vali => {
        if (vali) {
          updateDataTable(this.tableForm).then(res => {
            this.dataTables = res.data.dataTables
            this.$message.success("修改成功")
            this.dialog = false
            this.$emit('setTableDatas',this.dataTables)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">

.demo-drawer__footer {
  text-align: center;
  margin-top: 50px;
  padding: 0 20px;
}

</style>>
